<template>
	<view class="container">
		<view class="tui-page__hd">
			<view class="tui-page__title">Lazy load</view>
			<view class="tui-page__desc">图片懒加载：如果图片高度设置为auto，mode值需要设置为widthFix</view>
		</view>
		<tui-waterfall :listData="listData">
			<!-- #ifdef H5 || APP-PLUS -->
			<template v-slot:left="slotProps">
				<view class="tui-product__item" @tap="detail(slotProps.entity,slotProps.index)">
					<tui-lazyload-img width="100%" height="370rpx" :src="slotProps.entity.img"></tui-lazyload-img>
					<view class="tui-product__content">
						<view class="tui-product__title">{{ slotProps.entity.name || '' }}</view>
						<view>
							<view class="tui-product__price">
								<text class="tui-sale__price">￥{{ slotProps.entity.sale || '0.00' }}</text>
								<text class="tui-factory__price">￥{{ slotProps.entity.factory || '0.00' }}</text>
							</view>
							<view class="tui-product__pay">{{ slotProps.entity.payNum || 0 }}人付款</view>
						</view>
					</view>
				</view>
			</template>
			<template v-slot:right="sp">
				<view class="tui-product__item" @tap="detail(sp.entity,sp.index)">
					<tui-lazyload-img width="100%" height="370rpx" :src="sp.entity.img"></tui-lazyload-img>
					<view class="tui-product__content">
						<view class="tui-product__title">{{ sp.entity.name || '' }}</view>
						<view>
							<view class="tui-product__price">
								<text class="tui-sale__price">￥{{ sp.entity.sale || '0.00' }}</text>
								<text class="tui-factory__price">￥{{ sp.entity.factory || '0.00' }}</text>
							</view>
							<view class="tui-product__pay">{{ sp.entity.payNum || 0 }}人付款</view>
						</view>
					</view>
				</view>
			</template>
			<!-- #endif -->
			<!-- #ifndef APP-PLUS || H5 -->
			<template slot-scope="{ entity, index }" slot="left">
				<view class="tui-product__item" @tap="detail(entity,index)">
					<tui-lazyload-img width="100%" height="370rpx" :src="entity.img"></tui-lazyload-img>
					<view class="tui-product__content">
						<view class="tui-product__title">{{ entity.name || '' }}</view>
						<view>
							<view class="tui-product__price">
								<text class="tui-sale__price">￥{{ entity.sale || '0.00' }}</text>
								<text class="tui-factory__price">￥{{ entity.factory || '0.00' }}</text>
							</view>
							<view class="tui-product__pay">{{ entity.payNum || 0 }}人付款</view>
						</view>
					</view>
				</view>
			</template>
			<template slot-scope="{ entity, index }" slot="right">
				<view class="tui-product__item" @tap="detail(entity,index)">
					<tui-lazyload-img width="100%" height="370rpx" :src="entity.img"></tui-lazyload-img>
					<view class="tui-product__content">
						<view class="tui-product__title">{{ entity.name || '' }}</view>
						<view>
							<view class="tui-product__price">
								<text class="tui-sale__price">￥{{ entity.sale || '0.00' }}</text>
								<text class="tui-factory__price">￥{{ entity.factory || '0.00' }}</text>
							</view>
							<view class="tui-product__pay">{{ entity.payNum || 0 }}人付款</view>
						</view>
					</view>
				</view>
			</template>
			<!-- #endif -->
		</tui-waterfall>
		<!--加载loadding-->
		<tui-loadmore v-if="loadding" :index="3" type="red"></tui-loadmore>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageIndex: 1,
				loadding: false,
				pullUpOn: true,
				listData: [{
						img: 'https://thorui.cn/images/mall/product/1.jpg',
						name: '欧莱雅（LOREAL）奇焕光彩粉嫩透亮修颜霜 30ml（欧莱雅彩妆 BB霜 粉BB 遮瑕疵 隔离）',
						sale: 599,
						factory: 899,
						payNum: 2342
					},
					{
						img: 'https://thorui.cn/images/mall/product/2.jpg',
						name: '德国DMK进口牛奶  欧德堡（Oldenburger）超高温处理全脂纯牛奶1L*12盒',
						sale: 29,
						factory: 69,
						payNum: 999
					},
					{
						img: 'https://thorui.cn/images/mall/product/3.jpg',
						name: '【第2支1元】柔色尽情丝柔口红唇膏女士不易掉色保湿滋润防水 珊瑚红',
						sale: 299,
						factory: 699,
						payNum: 666
					},
					{
						img: 'https://thorui.cn/images/mall/product/4.jpg',
						name: '百雀羚套装女补水保湿护肤品',
						sale: 1599,
						factory: 2899,
						payNum: 236
					},
					{
						img: 'https://thorui.cn/images/mall/product/5.jpg',
						name: '百草味 肉干肉脯 休闲零食 靖江精制猪肉脯200g/袋',
						sale: 599,
						factory: 899,
						payNum: 2399
					},
					{
						img: 'https://thorui.cn/images/mall/product/6.jpg',
						name: '短袖睡衣女夏季薄款休闲家居服短裤套装女可爱韩版清新学生两件套 短袖粉色长颈鹿 M码75-95斤',
						sale: 599,
						factory: 899,
						payNum: 2399
					},
					{
						img: 'https://thorui.cn/images/mall/product/1.jpg',
						name: '欧莱雅（LOREAL）奇焕光彩粉嫩透亮修颜霜',
						sale: 599,
						factory: 899,
						payNum: 2342
					},
					{
						img: 'https://thorui.cn/images/mall/product/2.jpg',
						name: '德国DMK进口牛奶',
						sale: 29,
						factory: 69,
						payNum: 999
					},
					{
						img: 'https://thorui.cn/images/mall/product/3.jpg',
						name: '【第2支1元】柔色尽情丝柔口红唇膏女士不易掉色保湿滋润防水 珊瑚红',
						sale: 299,
						factory: 699,
						payNum: 666
					},
					{
						img: 'https://thorui.cn/images/mall/product/4.jpg',
						name: '百雀羚套装女补水保湿护肤品',
						sale: 1599,
						factory: 2899,
						payNum: 236
					}
				]
			}
		},
		methods: {
			detail(entity, index) {
				this.tui.toast(entity.name)
			}
		},
		onReachBottom: function() {
			if (!this.pullUpOn) return;
			this.loadding = true;
			if (this.pageIndex == 4) {
				this.loadding = false;
				this.pullUpOn = false;
			} else {
				let loadData = JSON.parse(JSON.stringify(this.listData));
				loadData = loadData.splice(0, 10);
				if (this.pageIndex == 1) {
					loadData = loadData.reverse();
				}
				this.listData = this.listData.concat(loadData);
				this.pageIndex = this.pageIndex + 1;
				this.loadding = false;
			}
		}
	}
</script>

<style>
	.container {
		padding-bottom: 40rpx;
	}

	.tui-product__item {
		width: 100%;
		margin-bottom: 10rpx;
		background: #fff;
		box-sizing: border-box;
		border-radius: 12rpx;
		overflow: hidden;
	}

	.tui-product__content {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 20rpx;
	}

	.tui-product__title {
		color: #2e2e2e;
		font-size: 26rpx;
		line-height: 32rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.tui-product__price {
		padding-top: 18rpx;
	}

	.tui-sale__price {
		font-size: 34rpx;
		font-weight: 500;
		color: #e41f19;
	}

	.tui-factory__price {
		font-size: 24rpx;
		color: #a0a0a0;
		text-decoration: line-through;
		padding-left: 12rpx;
	}

	.tui-product__pay {
		padding-top: 10rpx;
		font-size: 24rpx;
		color: #656565;
	}
</style>
